<template>
  <div class="pageContent2">
    <div class="centerAll">
      <div class="demo-collapse"  >
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" >
          <el-tab-pane label="基础设置" name="1">
            <Basis ref="basisRef" :editId="editId" :isFormDisabled="true" />
          </el-tab-pane>
          <el-tab-pane label="药品相关设置" name="2">
            <Drug ref="drugRef" :activeName="activeName" :editId="editId" :isFormDisabled="true" />
          </el-tab-pane>
        </el-tabs>
        <div class="bottomBtn">
          <el-button @click="backForm">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import Basis from '../officina_detail/baseInfo.vue'
  import Drug from '../officina_detail/drugInfo.vue'
  import {
    ref,
    nextTick
  } from 'vue'
  import {
    ElMessage
  } from "element-plus";

  import {
    create,
    update
  } from '/src/api/pharmacy/basis'
  import {
    useRoute,
    useRouter
  } from "vue-router";
  // import {
  //   Edit
  // } from '@element-plus/icons-vue/dist/types';
  const router = useRouter()
  const route = useRoute()

  const activeName = ref('1')
  const handleChange = (val) => {
    console.log(val)
  }
  const basisRef = ref(null);
  const getChildRef = () => basisRef.value;

  const drugRef = ref(null)
  const getChildRefD = () => drugRef.value;

  const form = ref({
    baseInfo: {},
    drugInfo: []
  })
  const editId = ref('')
  if (route.query.id) {
    editId.value = route.query.id
    console.log(editId.value)
  }
  const backForm = () => {
    router.replace({
      name: 'officina_list'
    });
  }
  const submitForma = async () => {
    try {
      const result1 = await getChildRef().submitFormWithResult();
      const result2 = await getChildRefD().submitFormWithResultD();
      // console.log(JSON.stringify(result1), JSON.stringify(result2))
      if (JSON.stringify(result1) == "{}" || JSON.stringify(result2) == "{}") {
        console.log('有子组件验证不通过');

        if (JSON.stringify(result1) == "{}" && JSON.stringify(result2) != "{}") {
          ElMessage.error('请完善基础信息必填项.')
        } else if (JSON.stringify(result1) != "{}" && JSON.stringify(result2) == "{}") {
          ElMessage.error('请完善药品相关设置必填项.')
        } else {
          ElMessage.error('请完善基础信息以及药品相关设置必填项.')
        }
      } else {
        console.log('所有子组件验证通过');
        // 调用提交接口
        form.value.baseInfo = {
          ...result1
        };
        form.value.drugInfo = [
          ...result2
        ];
        if (editId.value) {
          // await update(form.value)
          getUpdate(form.value)
        } else {
          // await getCreate(form.value);
          getCreate(form.value)
        }

      }
    } catch (error) {
      console.error('出现错误：', error);
    }
  };
  const getUpdate = async (data) => {
    const result = await update(data);
    if (result && result.code == 200) {
      ElMessage({
        message: '修改成功',
        type: 'success',
      });
      router.replace({
        name: 'officina_list'
      }); // 跳转到目标路由
    }
  }

  const getCreate = async (data) => {
    const result = await create(data);
    if (result && result.code == 200) {
      ElMessage({
        message: '创建成功',
        type: 'success',
      });
      router.replace({
        name: 'officina_list'
      }); // 跳转到目标路由
    }
    console.log(result.code)
    // dosageItems.value = result.data.data
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-collapse-item__header {
    background: #f6f6f6;
    padding: 0px 15px;
    color: #373737;
  }

  ::v-deep .el-collapse-item__content {
    padding: 20px 40px;
  }

  .pageContent2 {
    background: #fff;
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    min-height: 86vh;
  }
</style>